<template>
  <div>
    <!-- 标题数据 -->
    <el-card>
      <el-row :gutter="27" type="flex" justify="space-between">
        <el-col :span="6">
          <div class="green">
            <span>地府人数</span>
            <h2>1986</h2>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="blue">
            <span>今日入境</span>
            <h2>10</h2>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="black">
            <span>今日出境</span>
            <h2>16</h2>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="orange">
            <span>管理员</span>
            <h2>100</h2>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="nav-list">
      <!-- 常用功能导航 -->
      <el-col :span="15">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>常用功能导航</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-more"></el-button>
          </div>
          <div class="text item">
            <el-row class="nav-div">
              <!-- 生死簿 -->
              <el-col :span="4">
                <div><i class="el-icon-tickets nav"></i></div>
                <span>生死簿</span>
              </el-col>
              <!-- 查询寿命 -->
              <el-col :span="4">
                <div><i class="el-icon-search nav"></i></div>
                <span>查询寿命</span>
              </el-col>
              <!-- 入境管理 -->
              <el-col :span="4">
                <div><i class="el-icon-takeaway-box nav"></i></div>
                <span>入境管理</span>
              </el-col>
              <!-- 重新投胎 -->
              <el-col :span="4">
                <div><i class="el-icon-s-promotion nav"></i></div>
                <span>重新投胎</span>
              </el-col>
              <!-- 货币管理 -->
              <el-col :span="4">
                <div><i class="el-icon-money nav"></i></div>
                <span>货币管理</span>
              </el-col>
              <!-- 操作日志 -->
              <el-col :span="4">
                <div><i class="el-icon-document-checked nav"></i></div>
                <span>操作日志</span>
              </el-col>
            </el-row>
            <el-row class="nav-div">
              <!-- 十八层地狱 -->
              <el-col :span="4">
                <div><i class="el-icon-s-opportunity nav"></i></div>
                <span>十八地狱</span>
              </el-col>
              <!-- 发勾魂单 -->
              <el-col :span="4">
                <div><i class="el-icon-s-release nav"></i></div>
                <span>发勾魂单</span>
              </el-col>
              <!-- 资产管理 -->
              <el-col :span="4">
                <div><i class="el-icon-office-building nav"></i></div>
                <span>资产管理</span>
              </el-col>
              <!-- 员工管理 -->
              <el-col :span="4">
                <div><i class="el-icon-s-custom nav"></i></div>
                <span>员工管理</span>
              </el-col>
              <!-- 营销管理 -->
              <el-col :span="4">
                <div><i class="el-icon-s-data nav"></i></div>
                <span>营销管理</span>
              </el-col>
              <!-- 百鬼夜行 -->
              <el-col :span="4">
                <div><i class="el-icon-moon nav"></i></div>
                <span>百鬼夜行</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!-- 待办事件 -->
      <el-col :span="9">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日待办</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-more"></el-button>
          </div>
          <div class="text item backlog">
            <!-- 标题 -->
            <el-row :gutter="24" class="title">
              <el-col :span="10">
                AM 9:00
              </el-col>
              <el-col :span="8">
                大事件审判
              </el-col>
            </el-row>
            <!-- 时间 -->
            <el-row class="time">
              <el-col :span="3">
                时间：
              </el-col>
              <el-col :span="21">
                3029年2月29日
              </el-col>
            </el-row>
            <!-- 地点 -->
            <el-row class="site">
              <el-col :span="3">
                地点：
              </el-col>
              <el-col :span="21">
                会议室2938
              </el-col>
            </el-row>
            <!-- 头像 -->
            <el-row class="avatar">
              <el-col :span="2">
                <el-avatar @error="errorHandler" size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="2">
                <el-avatar @error="errorHandler" size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="2">
                <el-avatar @error="errorHandler" size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="2">
                <el-avatar @error="errorHandler" size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="2">
                <el-avatar @error="errorHandler" size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="2">
                <span class="avatar-num">+8</span>
              </el-col>
            </el-row>
            <!-- 分割线 -->
            <hr>
            <el-row>
              <el-col :span="4">PM 6:00</el-col>
              <el-col :span="20">
                职工聚餐
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">PM 11:30</el-col>
              <el-col :span="20">
                判官高级培训
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!-- 地府出境人数 -->
      <el-col :span="15">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>地府出境人数</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-more"></el-button>
          </div>
          <div class="text item">
            <my-edit></my-edit>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>各层地狱人数</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-more"></el-button>
          </div>
          <div class="text item">
            <my-tier></my-tier>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import edit from '@/components/edit'
import tier from '@/components/tier'
export default {
  name: 'home',
  components: {
    'my-edit': edit,
    'my-tier': tier
  },
  data () {
    return {}
  },
  methods: {
    errorHandler () {
      return true
    }
  }
}
</script>
<style lang="less" scoped>
// 上方数据
.green, .blue, .black, .orange{
  width: 100%;
  padding: 30px 0px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
}
h2 {
  font-weight: normal;
  font-size: 30px;
  padding: 0;
  margin: 0;
}
.green {
  background-color: #3CDB86;
}
.blue {
  background-color: #4480F4;
}
.black {
  background-color: #083045;
}
.orange {
  background-color: #F66932;
}

// 下方卡片
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 1px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

// 常用功能导航
.nav-list {
  .nav-div {
    text-align: center;
    margin: 10px 0;
    .nav {
      padding: 15px;
      border: 1px solid gray;
      border-radius: 50%;
      font-size: 30px;
    }
    span {
      font-size: 13px;
    }
  }
}

// 今日待办
.backlog {
  .title {
    padding: 10px 0;
    font-size: 12px;
    color: #ffffff;
    background-color: #0099FF;
  }
  .time, .site, .avatar {
    padding: 5px 0;
  }
  .avatar-num {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #0099FF;
    border-radius: 50%;
    color: #ffffff;
  }
  hr {
    background-color: gray;
  }
}
// 地府出境人数
#edit, #tier {
  width: 100%;
  height: 300px;
}
</style>
